<template>
  <div class="monitor-center">
    <div class="monitoring-box">
      <div class="monitoring">
      </div>
    </div>
    <div class="thumbnail">
      <div v-for="(item, i) in 4" :key="i">
        <svg-icon
          name="signal"
          style="width: 64px; height: 64px; margin-bottom: 7px"
        />
        <span>影像序列{{i+1}}</span>
      </div>
    </div>
    <div class="monitor-menu">
      <div
        v-for="(item, index) in menuList"
        :key="index"
        :class="{ active: index === nowIndex }"
        @click="nowIndex = index"
      >
        <svg-icon
          :name="item.iconName"
          style="width: 20px; height: 20px; margin-right: 10px"
        />
        <span>{{ item.menuName }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
const prop = defineProps({});
const nowIndex = ref(0);
const activeVideo = ref(0);
const menuList = ref([
  {
    iconName: "file",
    menuName: "检验报告",
  },
  {
    iconName: "video",
    menuName: "检查报告",
  },
  {
    iconName: "dashboard",
    menuName: "患者病历",
  },
  {
    iconName: "sound",
    menuName: "His同步",
  },
]);
</script>
<style lang="scss" scoped>
.monitor-center {
  display: flex;
  flex-direction: column;
  height: calc(100% - 0px);
  .monitoring-box{
    position: relative;
    // flex: 1;
    height: 680px;
    border-radius: 12px;
    border: 2px solid transparent;
    background-clip: padding-box;
    .monitoring {
      left: 0;
    position: absolute;
    z-index: 1;
    background-size: cover;
    // padding: 4px;
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }
    &::before{
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      // z-index: -1;
      margin: -2px;
      border-radius: inherit;
      background: linear-gradient(270deg, rgba(67, 213, 199, 0.4) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(67, 213, 199, 0.4) 100%) ;
    }
  }

  .thumbnail {
    height: 125px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--Gray-Gray7, #8b8b8b);
    div {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 243px;
      background: url("@/assets/home/wait-signal.png") no-repeat;
      border-radius: 12px;
      height: 100%;
      background-size: cover;
      img {
        width: 308px;
        object-fit: contain;
        border-radius: 12px;
      }
    }
    .active {
      border: 2px solid rgba(144, 255, 228, 0.64);
    }
  }
  .monitor-menu {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {      
      display: flex;
      align-items: center;
      justify-content: center;
      // padding: 0 80px;
      width: 24%;
      height: 60px;
      border-radius: 9px;
      border: 1px solid var(--Gray-Gray12, #2c2c2c);
      background: rgba(44, 44, 44, 0.67);
      cursor: pointer;
      color: var(--Gray-Gray6, #a6a6a6);
      .svg-icon {
        fill: var(--Gray-Gray6, #a6a6a6);
      }
    }
    .active {
      position: relative;
      box-shadow: 0px -4px 10px 1px rgba(67, 213, 199, 0.2);
      border: 1px solid var(--Gray-Gray12, #2c2c2c);
      background: linear-gradient(0deg, rgba(30, 30, 30, 0.8), rgba(30, 30, 30, 0.8)),
      linear-gradient(266.49deg, rgba(0, 0, 0, 0) 33.46%, rgba(67, 213, 199, 0.08) 91.12%);
      color: rgba(7, 146, 132, 1);
      .svg-icon {
        fill: rgba(7, 146, 132, 1);
      }
      &::before{
        content: '';
        position: absolute;
        top: -11px;
        left: 0;
        width: 100%;
        height: 13px;
        background: radial-gradient(62.83% 68.02% at 49.84% 96.36%, #FFFFFF 3.81%, rgba(0, 255, 240, 0.6) 13.59%, rgba(0, 255, 209, 0.33) 26.43%, rgba(9, 139, 204, 0.3238) 45.68%, rgba(14, 116, 167, 0.177) 61.72%, rgba(0, 102, 153, 0.1) 70.13%, rgba(0, 91, 137, 0.085) 74.6%, rgba(0, 63, 95, 0.0558) 83.34%, rgba(0, 18, 27, 0.0154) 95.4%, rgba(0, 0, 0, 0) 100%);

      }
      &::after{
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 13px;
        background: radial-gradient(62.83% 68.02% at 49.84% 96.36%, #FFFFFF 3.81%, rgba(0, 255, 240, 0.6) 13.59%, rgba(0, 255, 209, 0.33) 26.43%, rgba(9, 139, 204, 0.3238) 45.68%, rgba(14, 116, 167, 0.177) 61.72%, rgba(0, 102, 153, 0.1) 70.13%, rgba(0, 91, 137, 0.085) 74.6%, rgba(0, 63, 95, 0.0558) 83.34%, rgba(0, 18, 27, 0.0154) 95.4%, rgba(0, 0, 0, 0) 100%);
      }
    }
  }
}
</style>
